<template>
  <el-checkbox-group v-model="_value">
    <el-checkbox :label="item.cardId" name="canEventUser" v-for="item in card" :key="item.cardId">{{ item.cardName }}</el-checkbox>
  </el-checkbox-group>
</template>

<script>
/**
 * hpro-checkbox-card
 * @desc 会员卡选择控件（多选）
 *
 * @param { array } value = 已选择的会员卡列表，用:value.sync或v-model绑定，格式[{cardId: 'id', cardName: 'cardName'}]
 */
export default {
  name: 'hpro-checkbox-card',
  componentName: 'hpro-checkbox-card',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: Array
  },
  data () {
    return {
      card: []
    }
  },
  created () {
    this.getCard()
  },
  computed: {
    _value: {
      get () {
        let value = this.value
        let tmp = []
        value.map(element => {
          tmp.push(element.cardId)
        })
        return tmp
      },
      set (val) {
        let card = this.card
        let tmp = []
        val.map(elementTmp => {
          card.map(elementData => {
            if (elementTmp === elementData.cardId) {
              tmp.push(elementData)
            }
          })
        })
        this.$emit('change', tmp)
        this.$emit('update:value', tmp)
      }
    }
  },
  methods: {
    // 获取会员卡列表
    getCard () {
      let card = []
      let i = 1
      while (i < 5) {
        card.push({
          cardId: i,
          cardName: '会员卡' + i
        })
        i++
      }
      card.unshift({
        cardId: 0,
        cardName: '非会员'
      })
      this.card = card
    }
  }
}
</script>
